<template>
	<view class="w-100">
		<view class="flex-1 mx-2 mt-3">
			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
		</view>
		<template v-if="!loadingState">
			<view class="flex-1 row" style="height: 500px;">
				<image :src="loadingImg" style="width: 100rpx;height: 100rpx;" mode=""></image>
			</view>
		</template>
		<template v-else>
			<view class="flex-1 mx-3 mt-3 row-ac">
				<view class="row-ac flex-1 row">
					<view class="font-s-4 mr-1">上交总笔数:</view>
					<view class="font-s-4 font-w text-main-color">{{ tatisticsData.cumulative_total_count }}</view>
				</view>
				<view class="row-ac flex-1 row">
					<view class="font-s-4 mr-1">上交总金额:</view>
					<view class="font-s-4 font-w text-main-color">{{ tatisticsData.cumulative_total_amount }}</view>
				</view>
			</view>
			<view class="flex-1 mx-3 mt-3 revenue-box" v-if="tatisticsList.length > 0">
				<view class="flex-1 row-ac font-s-3 text-muted font-w">
					<view class="flex-1 mr-2">用户</view>
					<view class="user-hand row">上交笔数</view>
					<view class="user-hand row">上交金额</view>
					<view class="user-hand row">个人利润</view>
				</view>
				<view class="flex-1 mt-2">
					<view class="flex-1 row-ac font-s-3 py-2 border-bottom" v-for="(item,index) in tatisticsList"
						:key="index" @click="toReportList(item)">
						<view class="flex-1 mr-2">
							<view class="font-s-2 row-ac">
								<view class="in1line flex-1">{{ item.nickname }}</view>
								<view class="text-muted">({{ item.identity}})</view>
							</view>
							<view class="font-s-1 text-muted">电话:{{ item.userphone }}</view>
						</view>
						<view class="user-team row">{{ item.personal_total_count }}
						</view>
						<view class="user-team row">{{ item.personal_total_amount }}</view>
						<view class="user-team row">{{ item.personal_total_profit }}
						</view>
					</view>
				</view>
			</view>
			<view class="flex-1 mx-3 mt-3 revenue-box" v-else>
				<text class="font-s-35">暂无数据....</text>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		revenuereportPatchUrl,
		distributorsDetailUrl,
		userInfoUrl,
		revenuestatisticsListUrl,
		batchmodifyreportUrl
	} from "@/api/index.js"
	export default {
		data() {
			return {
				loadingState: false,
				loadingImg: '../../static/img/loading.gif',
				showLeft: false,
				queryInfo: {
					start_time: '',
					end_time: '',
					page: 1,
					page_size: 25
				},
				distributorsDetail: '',
				userInfo: '',
				reachId: 6,
				orderInfo: {
					order_user: '',
					order_username: '',
					order_nickname: '',
					order_head_image: ''
				},
				tatisticsData:{
					cumulative_total_amount:0,
					cumulative_total_count:0
				},
				tatisticsList: [],
				tatisticsTotal: 0,
				FormData: {
					userId: ''
				},
				datetimerange: [],

			}
		},
		filters: {
			receiveFilter(status) {
				if (status === 0) {
					return '未收款'
				} else if (status === 1) {
					return '已收款'
				} else if (status === 2) {
					return '收款中'
				}
			}
		},
		onLoad() {
			this.init()
		},
		created() {
			this.getDistributorsDetail()
			this.getUserInfo()
		},
		onReachBottom() {
			this.onReachBottomHandle();
		},
		mounted() {
			const now = new Date();
			// 初始化日期范围
			this.queryInfo.start_time = this.formatDate(now, 'start');
			this.queryInfo.end_time = this.formatDate(now, 'end');
			this.datetimerange = [this.queryInfo.start_time, this.queryInfo.end_time];

			// 组件加载时获取数据
			this.getRevenuestatisticsList();
		},

		watch: {
			datetimerange(newval) {
				if (newval.length === 2) {
					// 使用自定义的格式化方法
					this.queryInfo.start_time = this.formatDate(new Date(newval[0]), 'start');
					this.queryInfo.end_time = this.formatDate(new Date(newval[1]), 'end');

					// 重新获取数据
					this.getRevenuestatisticsList();
				}
			},
		},
		methods: {
			formatDate(date, type) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(date.getDate()).padStart(2, '0');
				let hours, minutes, seconds;

				if (type === 'start') {
					hours = '00';
					minutes = '00';
					seconds = '00';
				} else if (type === 'end') {
					hours = '23';
					minutes = '59';
					seconds = '59';
				}

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			init() {
				this.getRevenuestatisticsList()
			},
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
				})
			},
			getDistributorsDetail() {
				this.$R.get(distributorsDetailUrl).then(res => {
					this.distributorsDetail = res.data
				})
			},
			getRevenuestatisticsList() {
				this.loadingState = false
				this.$R.get(revenuestatisticsListUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.tatisticsData = res.data
						this.tatisticsList = res.data.list
						this.tatisticsTotal = res.data.total
						this.loadingState = true;
					}
				})
			},
			onReachBottomHandle() {
				// 触底事件
				if (this.tatisticsTotal != this.tatisticsList.length) {
					this.queryInfo.page_size += 25;
					this.getRevenuestatisticsList()
				}
			},
			revenuereportPatch(item) {
				uni.showModal({
					title: '提示',
					content: '是否已经收到上交款?',
					confirmText: '确认收款',
					success: (res) => { // 使用箭头函数
						if (res.confirm) {
							this.FormData.userId = item.user_id
							this.$R.get(batchmodifyreportUrl, this.FormData).then(
								res => {
									if (res.code == 200) {
										uni.showToast({
											title: '收款成功',
											icon: 'none'
										});
										this.getRevenuestatisticsList()
									}
								})
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			},
			toReportList(item) {
				uni.navigateTo({
					url: '/pages/datacenter/sub-sales-report?subuserId=' + item.user_id,
				});
			},
			toSubOrder(item) {
				uni.navigateTo({
					url: '/pages/order/sub-order?subuserId=' + item.user_id,
				});
			},
			toTeamOrder(item) {
				uni.navigateTo({
					url: '/pages/order/team-order?subuserId=' + item.user_id,
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.tab-box {
		height: 92rpx;
		border: 1rpx solid #000;
	}

	.active {
		background-color: #000;

		text {
			color: #fff;
		}
	}

	.revenue-box {

		.user-team {
			width: 150rpx;
		}

		.user-hand {
			width: 150rpx;
			font-size: 26rpx;
		}
	}
</style>